
<template>
  <div class="property">
    <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
    <div :class="readonly ? 'readonly_true' : ''" >
      <BooleanProp :withUndefined="withUndefined" :defaultValue="defaultValue" :readonly="readonly" v-model="booleanRef">
      </BooleanProp>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import BooleanProp from "../commons/BooleanProp.vue";
import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
  property: any;
}>(), {
});
const emits = defineEmits<{
  (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();
const { property } = props

const withUndefined = property.withUndefined
const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount)
const booleanRef = readonly ? toReadonlyVueRef<boolean | undefined>(disposer, property.reactVar, s => s) : toVR<boolean | undefined>(disposer, property.reactVar, s => s)
const defaultValue: boolean | undefined = property.defaultValue

</script>

<style scoped>
.property {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;

}
.item_name {
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: rgba(230, 230, 230, 1);
  font-size: 14px;
}
.readonly_true {
  cursor: not-allowed;
  cursor: no-drop;
}
</style>

